<template>
	<view class="examQuestion">
		<view class="head">
			<view class="countdown">
				<view class="countdown-title">倒计时：</view>
				<uni-countdown 
					:show-day="false" 
					:hour="hours" 
					:minute="minute" 
					:second="second"
					@timeup="timeup" 
					color="#000" 
					class="uni-countdown">
				</uni-countdown>
			</view>
			<image class="icon-table" src="../../static/fonts/list.png" @click="questionListBlock()"></image>
		</view>
		<view class="content">
			<Select
				ref="select"
				:ques="ques"
				:smallQuesNum="smallQuesNum"
				:bigQuesNum="bigQuesNum"
				@commitAnswer="commitAnswer">
			</Select>
		</view>
		<view class="tip">
			<span v-if="this.exam.allTime===null">答题时间正在加载中</span>
			<span v-else>答题时间为<span class="red">{{Math.round(this.exam.allTime/60)}}分钟</span>，请把握好时间</span>
		</view>
		<view class="btns">
			<button @click="goBack()" :disabled="goBackDisable">上一题</button>
			<button @click="goNext()" v-if="isGoNext===true">下一题</button>
			<button v-else-if="isGoNext===false" @click="commit()">交卷</button>
		</view>
		<question-list 
			ref="questionList"
			class="questionList"
			:questionListB='questionListB' 
			:exam='exam'
			:key="index"
			@chengeQuestionListB='chengeQuestionListB'
			@quesListTo="quesListTo">
		</question-list>
	</view>
</template>

<script>
	import Select from "../../components/exam-question/Select.vue"
	import QuestionList from "../../components/exam-question/questionList.vue"
	import Home from "../../api/home/home.js"
	export default {
		data() {
			return {
				questionListB: false,
				height: 0,
				realHeight: 0,
				exam: {},
				ques: {},
				bigQuesNum: 1,
				smallQuesNum: 0,
				isGoNext: true,
				goBackDisable: true,
				examAnswer: '',
				examSort: null,
				// 存答过的答案
				answerArr: [],
				// 存储已经答过的试卷第一题的答案
				oneAnswer: '',
				hours: 0,
				minute: 0,
				second: 0,
				index: 1
			}
		},
		components:{
			Select,
			QuestionList
		},
		onLoad(option) {
			let examDecode = decodeURIComponent(option.exam)
			if(examDecode){
				this.exam = JSON.parse(examDecode)
				console.log(this.exam,'考试基本信息')
				this.ques = this.exam.exam
				this.bigQuesNum = this.exam.bigQuesSort
				this.smallQuesNum = this.exam.sortInBigQues
				
				// 判断刚进来时，上一题按钮是否禁用
				if(this.exam.bigQuesSort===1&&this.exam.sortInBigQues===0){
					this.goBackDisable=true
				}else if(this.bigQuesNum===Object.keys(this.ques).length&&this.smallQuesNum===this.ques[this.bigQuesNum].length-1){
					// 刚进来就是最后一道题，显示交卷按钮
					this.isGoNext = false
					this.goBackDisable=false
				}else{
					this.goBackDisable=false
				}
				
				// 考试时间转换为时分秒
				this.formateTime()
			}
			
			// 处理富文本中的图片
			if(this.ques[this.bigQuesNum][this.smallQuesNum].quesContent!==''&&this.ques[this.bigQuesNum][this.smallQuesNum].quesContent!==null&&this.ques[this.bigQuesNum][this.smallQuesNum].quesContent){
				const regex = new RegExp('<img','gi');
				this.ques[this.bigQuesNum][this.smallQuesNum].quesContent = this.ques[this.bigQuesNum][this.smallQuesNum].quesContent.replace(regex,`<img style="max-width: 100%;"`);
			}
			this.filter();
			if(option.hasStart==='true'){
				this.oneAnswer = option.answer
				console.log(option.answer,'option.answer')
			}
			
		},
		mounted() {
			this.$refs.select.radioValue=this.oneAnswer
			this.$refs.select.checkboxValue=this.oneAnswer.split("|")
			this.examAnswer = this.oneAnswer
			this.examSort = this.exam.smallQuesSort
		},
		methods: {
			// 分割答案
			filter(){
				for(var i in  this.ques){
					this.ques[i].map(res=>{
						res.options = res.options.split("|");
					})
				}
			},
			// 秒转换为时分秒
			formateTime() {
				this.hours = parseInt(this.exam.leftTime / 3600)
				this.minute = parseInt(this.exam.leftTime / 60 % 60)
				this.second = Math.ceil(this.exam.leftTime % 60)  
			},
			// 接受子组件传过来的答案和题号
			commitAnswer(examAnswer,examSort,quesType){
				this.examAnswer = examAnswer
				this.examSort = examSort
				console.log(quesType,'quesType')
				if(quesType !==2 ){
					// 自动跳转下一题
					this.goNext()
				}
			},
			// 点击图标，questionList组件显示
			questionListBlock(){
				this.questionListB = !this.questionListB
			},
			// 点击下拉图标，组件消失
			chengeQuestionListB(){
				this.questionListB = false
			},
			// 上一题
			goBack(){
				// 进入上一题
				if(this.smallQuesNum>=0){
					if(this.smallQuesNum===0){
						if(this.bigQuesNum>1){
							this.bigQuesNum=this.bigQuesNum-1
							this.smallQuesNum=this.ques[this.bigQuesNum].length-1
						}else{
							this.goBackDisable=true
						}
					}else{
						this.isGoNext=true
						this.smallQuesNum = this.smallQuesNum-1
						if(this.smallQuesNum===0){
							if(this.bigQuesNum===1){
								this.goBackDisable=true
							}else{
								if(this.smallQuesNum<0){
									this.bigQuesNum=this.bigQuesNum-1
									this.smallQuesNum=this.ques[this.bigQuesNum].length-1
								}
							}
						}
					}
				}
				// 如果之前填写过，回显下一题
				for (var [key, value] of this.$refs.questionList.hasQuesSort) {
					if(this.ques[this.bigQuesNum][this.smallQuesNum].sort === key){
						this.$refs.select.radioValue=value
						this.$refs.select.checkboxValue=value.split("|")
						this.examAnswer = value
						this.examSort = key
						return 
					}else{
						// 当前选项的数据清空
						this.$refs.select.radioValue=null
						this.$refs.select.checkboxValue=[]
						this.examAnswer = null
						this.examSort = null
						// return
					}
				}
			},
			// 下一题
			goNext(){
				this.goBackDisable=false
				if(this.examAnswer===''||this.examSort===null){
					// 进入下一题
					if(this.bigQuesNum<=Object.keys(this.ques).length){
						if(this.bigQuesNum===Object.keys(this.ques).length&&this.smallQuesNum===this.ques[this.bigQuesNum].length-2){
							this.isGoNext=false
							if(this.smallQuesNum<this.ques[this.bigQuesNum].length-1){
								this.smallQuesNum = this.smallQuesNum+1
							}else{
								this.smallQuesNum=0
								this.bigQuesNum = this.bigQuesNum+1
							}
						}else if(this.bigQuesNum===Object.keys(this.ques).length&&this.smallQuesNum===this.ques[this.bigQuesNum].length-1){
							// 到达最后一题，按钮变为交卷，不能继续下一道
							this.isGoNext=false
						}else{
							this.isGoNext=true
							if(this.smallQuesNum<this.ques[this.bigQuesNum].length-1){
								this.smallQuesNum = this.smallQuesNum+1
							}else{
								this.smallQuesNum=0
								this.bigQuesNum = this.bigQuesNum+1
							}
						}
					}
					// 如果之前填写过，回显下一题
					for (var [key, value] of this.$refs.questionList.hasQuesSort) {
						if(this.ques[this.bigQuesNum][this.smallQuesNum].sort === key){
							this.$refs.select.radioValue=value
							this.$refs.select.checkboxValue=value.split("|")
							this.examAnswer = value
							this.examSort = key
							return
						}else{
							// 当前选项的数据清空
							this.$refs.select.radioValue=null
							this.$refs.select.checkboxValue=[]
							this.examAnswer = null
							this.examSort = null
						}
					}
				}else{
					let params = {
						examRecordId: this.exam.recordId,
						examAnswer: this.examAnswer,
						examSort: this.examSort,
						quesType: this.$refs.select.ques[this.bigQuesNum][this.smallQuesNum].quesType
					}
					// 提交答案
					// 已经答过的题，如果答案改变调接口，不改变就不调接口
					// for (var [key, value] of this.$refs.questionList.hasQuesSort) {
					// 	if(this.ques[this.bigQuesNum][this.smallQuesNum].sort === key&&this.examAnswer === value){
					// 		console.log(1111)
					// 	}
					// }
					Home.answer(params).then(res=>{
						if(res.code===0){
							// 将答案和题号添加进入map集合中
							if(this.examSort!==null&&this.examAnswer!==null){
								this.$refs.questionList.hasQuesSort.set(this.examSort,this.examAnswer)
							}
							
							if(this.bigQuesNum<=Object.keys(this.ques).length){
								if(this.bigQuesNum===Object.keys(this.ques).length&&this.smallQuesNum===this.ques[this.bigQuesNum].length-2){
									this.isGoNext=false
									if(this.smallQuesNum<this.ques[this.bigQuesNum].length-1){
										this.smallQuesNum = this.smallQuesNum+1
										// return
									}else{
										this.smallQuesNum=0
										this.bigQuesNum = this.bigQuesNum+1
									}
								}else if(this.bigQuesNum===Object.keys(this.ques).length&&this.smallQuesNum===this.ques[this.bigQuesNum].length-1){
									// 到达最后一题，按钮变为交卷，不能继续下一道
									this.isGoNext=false
								}else{
									this.isGoNext=true
									if(this.smallQuesNum<this.ques[this.bigQuesNum].length-1){
										this.smallQuesNum = this.smallQuesNum+1
										// return
									}else{
										this.smallQuesNum=0
										this.bigQuesNum = this.bigQuesNum+1
									}
								}
							}
							// 如果之前填写过，回显下一题
							for (var [key, value] of this.$refs.questionList.hasQuesSort) {
								if(this.ques[this.bigQuesNum][this.smallQuesNum].sort === key){
									this.$refs.select.radioValue=value
									this.$refs.select.checkboxValue=value.split("|")
									this.examAnswer = value
									this.examSort = key
									return 
								}else{
									// 当前选项的数据清空
									this.$refs.select.radioValue=null
									this.$refs.select.checkboxValue=[]
									this.examAnswer = null
									this.examSort = null
								}
							}
						}else{
							alert('请重新尝试！')
						}
					})
				}
			},
			isInMap(map,item){
				for (var [key, value] of map) {
					if(item === key){
				  		return true;
				  	}
				}
			    return false;
			},
			// 交卷
			examFinish(){
				var that = this
				uni.showLoading({
				    title: '收卷中……',
					mask: true,
					success() {
						Home.status(that.exam.recordId).then(res=>{
							if(res.code===0){
								that.$refs.questionList.hasQuesSort.clear()
								uni.hideLoading();
								uni.redirectTo({
									url: '/pages/exam-finish/exam-finish?scoreInfo='+JSON.stringify(res.data)
								})
							}
						})
					}
				});
			},
			// 交卷
			commit(){
				var that = this
				let noDoQues = this.exam.quesNum - this.$refs.questionList.hasQuesSort.size
				
				var arr = []
				// 当未答题目大于20道时，只显示20道
				var arrTwo = []
				var noDoQuesList = ''
				var noDoQuesListTwo = ''
				
				if(noDoQues!==0){
					if(this.$refs.questionList.hasQuesSort.size===0){
						arr = this.$refs.questionList.quesSort
					}else{
						for(var i=0;i<this.$refs.questionList.quesSort.length;i++){
							if(this.isInMap(this.$refs.questionList.hasQuesSort,this.$refs.questionList.quesSort[i])===false){
								arr.push(this.$refs.questionList.quesSort[i])
							}
						}
					}
					
					// 当未答题目大于20道时，只显示20道
					if(arr.length>20){
						for(var i=0;i<20;i++){
							arrTwo.push(arr[i])
						}
					}
					noDoQuesList = arr.toString()
					noDoQuesListTwo = arrTwo.toString()
				}
				
				// 如果最后一题为多选，提交答案后再提交试卷
				if(this.ques[this.bigQuesNum][this.smallQuesNum].quesType===2){
					if(this.examSort!==null&&this.examAnswer!==null){
						let params = {
							examRecordId: this.exam.recordId,
							examAnswer: this.examAnswer,
							examSort: this.examSort,
							quesType: this.$refs.select.ques[this.bigQuesNum][this.smallQuesNum].quesType
						}
						Home.answer(params).then(res=>{
							if(res.code===0){
								this.$refs.questionList.hasQuesSort.set(this.examSort,this.examAnswer)
							}
						})
					}
				}
				
				if(noDoQues===0){
					uni.showModal({
						title: '我要交卷',
						content: '您已答题结束，是否确认交卷？',
						success(res) {
							if(res.confirm){
								that.examFinish()
							}
						}
					})
				}else{
					if(arr.length>20){
						uni.showModal({
							title: '我要交卷',
							content: '您还有'+noDoQues+'道题未做，分别为第'+noDoQuesListTwo+'等道，是否确认交卷？',
							success(res) {
								if(res.confirm){
									that.examFinish()
								}
							}
						})
					}else{
						uni.showModal({
							title: '我要交卷',
							content: '您还有'+noDoQues+'道题未做，分别为第'+noDoQuesList+'道，是否确认交卷？',
							success(res) {
								if(res.confirm){
									that.examFinish()
								}
							}
						})
					}
				}
			},
			timeup(){
				var that = this
				Home.status(this.exam.recordId).then(res=>{
					if(res.code===0){
						uni.showModal({
							title: '考试时间已到，系统已为您自动交卷！',
							success(val) {
								that.$refs.questionList.hasQuesSort.clear()
								if(val.confirm){
									uni.redirectTo({
										url: '/pages/exam-finish/exam-finish?scoreInfo='+JSON.stringify(res.data)
									})
								}
								if(val.cancel){
									uni.redirectTo({
										url: '/pages/exam-finish/exam-finish?scoreInfo='+JSON.stringify(res.data)
									})
								}
							}
						})
					}
				})
			},
			// 通过答题卡跳转到当前题目
			quesListTo(item){
				for(var key in this.ques){
					for(var i=0;i<this.ques[key].length;i++){
						if(this.ques[key][i].sort===item){
							this.bigQuesNum = parseInt(key)
							this.smallQuesNum = parseInt(i)
							this.questionListB = false
							if(this.bigQuesNum===1&&this.smallQuesNum===0){
								this.goBackDisable = true
							}else{
								this.goBackDisable = false
							}
							if(this.bigQuesNum===Object.keys(this.ques).length&&this.smallQuesNum===this.ques[this.bigQuesNum].length-1){
								this.isGoNext = false
								this.goBackDisable = false
							}
						}
					}
				}
				// 如果之前填写过，回显答案
				for (var [key, value] of this.$refs.questionList.hasQuesSort) {
					if(this.ques[this.bigQuesNum][this.smallQuesNum].sort === key){
						this.$refs.select.radioValue=value
						this.$refs.select.checkboxValue=value.split("|")
						this.examAnswer = value
						this.examSort = key
						return 
					}else{
						// 当前选项的数据清空
						this.$refs.select.radioValue=null
						this.$refs.select.checkboxValue=[]
						this.examAnswer = null
						this.examSort = null
					}
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.examQuestion{
		width: 100%;
		.head{
			width: 690rpx;
			height: 60rpx;
			line-height: 60rpx;
			// background-color: #d62827;
			// border: 1px solid #d62827;
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			margin: 10rpx 10rpx;
			.countdown{
				width: 300rpx;
				// font-weight: 700;
				display: flex;
				justify-content: space-around;
				.uni-countdown{
					width: 150rpx;
				}
			}
			.icon-table{
				width: 45rpx;
				height: 35rpx;
				position: relative;
				top: 15rpx;
			}
		}
		.content{
			height: 850rpx;
			width: 700rpx;
			overflow: auto;
			margin: 0 auto;
			box-shadow: 1px 1px 20px #d1d1d1;
			border-radius: 10rpx;
		}
		.tip{
			margin-top: 40rpx;
			font-size: 25rpx;
			text-align: center;
			.red{
				color: #d62827;
			}
		}
		.btns{
			display: flex;
			justify-content: center;
			margin-top: 30rpx;
			button{
				width: 250rpx;
				height: 85rpx;
				line-height: 85rpx;
				background-color: #fdbb53;
			}
		}
		// .slide-fade-enter-active {
		// 	transition: all .3s ease;
		// }
		// .slide-fade-leave-active {
		// 	transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
		// }
		// .slide-fade-enter, .slide-fade-leave-to{
		// 	transform: translateY(20px);
		// 	opacity: 0;
		// }
		
	}
</style>
